<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/store/main'

const store = useMainStore()

const getWjxqxx = (data: any) => {
  if (Object.keys(data).length === 0) return

  if (data.wjbh && data.wjbh.length !== 0) {
    currentItem.value = { ...data }
  } else {
    currentItem.value = {}
  }
}

/* 展示详情 */
const currentItem = ref<any>({})

const fileUrl = computed(() => {
  return `${window.IPCONFIG}/fpi/wjfw/download?wjbh=${currentItem.value.wjbh}`
})

enum Wjlx {
  'gd0020001' = 'audio',
  'gd0020002' = 'video',
  'gd0020003' = 'image',
}
const checkType = () => {
  return Wjlx[store.$state.nodeTreeData?.mllxdm as keyof typeof Wjlx]
}

defineExpose({ getWjxqxx })
</script>
<template>
  <div class="container">
    <div class="preview-box">
      <img style="height: 100%" v-if="checkType() === 'image'" :src="fileUrl" alt="" />
      <video
        style="width: 100%; height: 100%"
        v-else-if="checkType() === 'video'"
        :src="fileUrl"
        controls
        controlsList="nodownload"
      ></video>
      <audio
        style="width: 100%"
        v-else-if="checkType() === 'audio'"
        :src="fileUrl"
        controls
        controlsList="nodownload"
      ></audio>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .preview-box {
    height: calc(100% - 60px);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
